import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Select, message, Modal, Spin } from 'antd';
import Area from '../../components/Area';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = Select;
const FormItem = Form.Item;
@connect(({ singlemanage, loading }) => ({
  singlemanage,
  loading: loading.models.singlemanage,
}))
@Form.create()
class BankForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      custId: '', // 客户名称id
      bankList: [], // 银行列表数据
    };
  }

  componentDidMount = () => {
    const { custId, dispatch } = this.props;
    this.setState({ custId });
    // 获取银行列表字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['BANK_ID'],
    }).then(data => {
      if (data && data.BANK_ID && data.BANK_ID.length) {
        this.setState({ bankList: data.BANK_ID });
      }
    });
  };

  // 新增银行账户保存
  submitBankInfo = () => {
    const { dispatch, form, cancelModal } = this.props;
    const { custId } = this.state;
    form.validateFieldsAndScroll((err, values) => {
      const temp = values;
      if (!err) {
        Object.keys(values).forEach(key => {
          if (values[key] && values[key].key) {
            temp[key] = values[key].key;
          } else {
            temp[key] = values[key] ? values[key] : '';
          }
        });

        dispatch({
          type: 'singlemanage/bankAccountInsert',
          payload: {
            custId,
            ...values,
          },
        }).then(response => {
          if (response.success) {
            message.success('新增成功！');
            cancelModal('false', true);
          } else {
            message.warning(`${response.message || '新增失败！'}`);
          }
        });
      }
    });
  };

  render() {
    const { bankList } = this.state;
    const {
      form: { getFieldDecorator },
      loading,
      cancelModal,
    } = this.props;
    const formItemLayoutModal = {
      labelCol: { md: { span: 6 } },
      wrapperCol: { md: { span: 16, offset: 1 } },
    };
    // 银行列表
    const bankOL = bankList.map(options => (
      <Option key={options.itemCode}>{options.itemName}</Option>
    ));
    return (
      <Spin tip="Loading..." spinning={loading}>
        <Modal
          title="新增银行账户信息"
          visible
          okText="保存"
          onOk={this.submitBankInfo}
          onCancel={() => {
            cancelModal('false');
          }}
        >
          <Form layout="horizontal">
            <FormItem {...formItemLayoutModal} label="城市" style={{ marginBottom: 10 }}>
              {getFieldDecorator('areaId', {
                rules: [{ required: true, message: '请输入' }],
              })(<Area />)}
            </FormItem>
            <FormItem {...formItemLayoutModal} label="银行" style={{ marginBottom: 10 }}>
              {getFieldDecorator('bankId', {
                rules: [{ required: true, message: '请选择' }],
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  style={{ width: '100%' }}
                  allowClear
                  labelInValue
                  showSearch
                  optionFilterProp="children"
                >
                  {bankOL}
                </HOCSelect>
              )}
            </FormItem>
            <FormItem {...formItemLayoutModal} label="开户行" style={{ marginBottom: 10 }}>
              {getFieldDecorator('bankOfDepoName', {
                rules: [{ required: true, message: '请选择' }],
              })(<Input placeholder="请输入" maxLength={30} />)}
            </FormItem>
            <FormItem {...formItemLayoutModal} label="银行账号" style={{ marginBottom: 10 }}>
              {getFieldDecorator('bankAcco', {
                rules: [{ required: true, message: '请选择' }],
              })(<Input placeholder="请输入" maxLength={25} />)}
            </FormItem>
            <FormItem {...formItemLayoutModal} label="开户单位名称" style={{ marginBottom: 10 }}>
              {getFieldDecorator('accoHolderName', {
                rules: [{ required: true, message: '请选择' }],
              })(<Input placeholder="请输入" maxLength={30} />)}
            </FormItem>
            <FormItem {...formItemLayoutModal} label="备注">
              {getFieldDecorator('remark', {
                rules: [{ required: false, message: '请选择' }],
              })(<Input placeholder="请输入" maxLength={65} />)}
            </FormItem>
          </Form>
        </Modal>
      </Spin>
    );
  }
}
export default BankForm;
